//获取学生数据 渲染到表格
async function renderStudent() {
    const { data: res } = await axios.get('/students')
    let arr = res.data.map(item => {
        return `<tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender === 0 ? '男' : '女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province} ${item.city} ${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
        </td>
      </tr>`
    })
    document.querySelector('tbody').innerHTML = arr.join('')
}
renderStudent()

//提前准备工作：模态框、省市县联动
//模态框
let addModal = new bootstrap.Modal(document.querySelector('#modal'))
// addModal.show()让模态框显示
// addModal.hide()让模态框关闭
document.querySelector('#openModal').addEventListener('click', function () {
    addModal.show()
})

//省市县联动
const initCity = async () => {
    const province = document.querySelector('[name=province]')
    const city = document.querySelector('[name=city]')
    const area = document.querySelector('[name=area]')

    // 4.1 -------- 先获取所有的省 -------------
    const { data: res1 } = await axios.get('/api/province')
    // console.log(res1) // { message: '获取成功', data: ['北京', '天津', '河北省', .....] }
    let arr1 = res1.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = '<option value="">--省份--</option>' + arr1.join('')

    // 4.2 -------- 切换省的时候，获取市 -------------
    province.addEventListener('change', async function () {
        let pname = province.value // 获取当前选择的省的名字
        // 省切换后，无论如何，都要重置县
        area.innerHTML = '<option value="">--地区--</option>'
        // 如果没有选择省，则需要重置市
        if (pname === '') return (city.innerHTML = '<option value="">--城市--</option>')
        // 下面，正常获取对应的市，并渲染到第2个下拉框的位置
        // console.log(pname)
        const { data: res2 } = await axios.get('/api/city', { params: { pname } })
        // console.log(res2) // { message: '获取成功', data: ['xx市', 'xx市', 'xx市', .....] }
        let arr2 = res2.data.map(item => `<option value="${item}">${item}</option>`)
        city.innerHTML = '<option value="">--城市--</option>' + arr2.join('')
    })

    // 4.3 -------- 切换市的时候，获取县 -------------
    city.addEventListener('change', async function () {
        let pname = province.value // 获取当前选择的省的名字
        let cname = city.value // 获取市的名字
        // 没有选择市，要重置县
        if (cname === '') return (area.innerHTML = '<option value="">--地区--</option>')
        // 下面，正常获取对应的县，并渲染到第3个下拉框的位置
        // console.log(pname)
        const { data: res3 } = await axios.get('/api/area', { params: { pname, cname } })
        // console.log(res2) // { message: '获取成功', data: ['xx市', 'xx市', 'xx市', .....] }
        let arr3 = res3.data.map(item => `<option value="${item}">${item}</option>`)
        area.innerHTML = '<option value="">--地区--</option>' + arr3.join('')
    })
}
initCity()

//添加学生
document.querySelector('#submit').addEventListener('click', async function (e) {
    e.preventDefault()
    let data = val(document.querySelector('#form'))
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    // ajax提交
    try {
        const { data: res } = await axios.post('/students', data)
        message.success(res.message)//插件提示
        renderStudent()//重新获取学生页面函数
        addModal.hide()//关闭模态框
    } catch (e) {
        message.error('添加失败')
    }
})

//删除学生
document.querySelector('tbody').addEventListener('click', async function (e) {
    if (e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id
        if (!confirm('确定删除吗')) return
        try {
            const { data: res } = await axios.delete(`/students/${id}`)
            message.success('删除成功')
            renderStudent()
        } catch (e) {
            message.error('删除失败')
        }
    }
    if (e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id
        addModal.show()
        const { data: res } = await axios.get(`/students/${id}`)
        //在数据回填之前，把市县渲染到第2、3个下拉框
        let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
        let p2 = axios.get('/api/area', { params: { pname: res.data.province, cname: res.data.city } })
        const result = await Promise.all([p1, p2])
        let arr2 = result[0].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=city]').innerHTML = `<option value="">--城市--</option>` + arr2.join('')

        let arr3 = result[1].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=area]').innerHTML = `<option value="">--地区--</option>` + arr3.join('')
        val(document.querySelector('#form'), res.data)
    }
})
//学生详情
//修改学生